<template>
  <div>
    <el-row>
      <el-col :span="24">
        <h1 align="center">{{ userGroupName }}资源使用一览</h1>
      </el-col>
    </el-row>
    <GroupResourceTable
      v-if="userGroupName != ''"
      :userGroupName="userGroupName"
    ></GroupResourceTable>
  </div>
</template>

<script>
  import { mapGetters } from "vuex";
  import * as UserGroupApi from "@/api/userGroup";
  import GroupResourceTable from "@/views/pages/components/GroupResourceTable";

  export default {
    data() {
      return {
        userGroupName: "",
      };
    },

    computed: {
      ...mapGetters({
        userInfo: "user/userInfo",
      }),
    },

    methods: {
      // 获取本组名
      getUserGroupName() {
        const path = this.$route.path;
        let userGroupId = path.substring(path.lastIndexOf("/") + 1);
        UserGroupApi.getUserGroupById(userGroupId).then((res) => {
          this.userGroupName = res.data.userGroupName;
        });
      },
    },

    components: {
      GroupResourceTable,
    },

    mounted() {
      this.getUserGroupName();
    },
  };
</script>
